const { ref, reactive, computed, createApp } = Vue;

const App = {
  setup() {
    const form = reactive({
      name: "", // 宠物名称
      owner: "", // 主人姓名
      phone: "", // 联系方式
    });
    const pets = ref([
      {
        checked: false,
        name: "小贝",
        owner: "梦想",
        phone: "12345678901",
        feed: 0,
      },
      {
        checked: false,
        name: "小红",
        owner: "幻想",
        phone: "56789012345",
        feed: 1,
      },
      {
        checked: false,
        name: "小李",
        owner: "现实",
        phone: "45678901234",
        feed: 3,
      },
    ]); // 宠物列表
    const showAddPop = ref(false); // 控制新增/编辑弹窗显示隐藏
    const addType = ref(0); // 0-Add 1-edit
    let editIndex = ref(-1); // 编辑的数组下标
    const showAlertPop = ref(false); // 控制提示弹窗显示隐藏
    const message = ref(""); // 提示弹窗信息
    /**
     * 处理保存事件
     */
    const handleSave = () => {
      if (checkBlank()) return;
      // 新增
      if (addType.value === 0) {
        // TODO：待补充代码 目标 1
        pets.value.push({
          checked: false,
          name: form.name,
          owner: form.owner,
          phone: form.phone,
          feed: 0,
        });
        // TODO：END
      } else {
        // 编辑
        pets.value[editIndex.value] = { ...form };
      }
      showAddPop.value = false;
    };
    const allCheck = computed({
      // TODO：待补充代码 目标 2
      get: () => {
        return pets.value.every((item) => item.checked);
      },
      set: (val) => {
        pets.value.forEach((item) => {
          item.checked = val;
        });
      },
      // TODO：END
    });

    /**
     * 点击`新增寄养`按钮
     */
    const clickAdd = () => {
      showAddPop.value = true;
      addType.value = 0;
      form.name = "";
      form.owner = "";
      form.phone = "";
    };

    /**
     * 点击列表项`编辑`按钮
     * @param pet 宠物
     * @param index 宠物列表的数组下标
     */
    const clickEdit = (pet, index) => {
      // 显示添加弹窗
      showAddPop.value = true;
      addType.value = 1;
      form.name = pet.name;
      form.owner = pet.owner;
      form.phone = pet.phone;
      form.checked = pet.checked;
      form.feed = pet.feed;
      editIndex.value = index;
    };

    /**
     * 表单校验：校验非空
     */
    const checkBlank = () => {
      form.name = form.name.trim();
      form.owner = form.owner.trim();
      form.phone = form.phone.trim();
      if (
        form.name.length === 0 ||
        form.owner.length === 0 ||
        form.phone.length === 0
      ) {
        showAlert("请填写完整信息");
        return true;
      }
      return false;
    };

    let all = computed(() => {
      // 所有宠物的数量
      return pets.value.length;
    });

    /**
     * 批量领走
     */
    const handleCheckedGetback = () => {
      const checkers = pets.value.filter((pet) => pet.checked);
      if (checkers.length === 0) {
        showAlert("请选择宠物");
        return;
      }
      pets.value = pets.value.filter((item) => item.checked !== true);
    };

    /**
     * 单个领走操作
     * @param pet 宠物信息
     */
    const handleGetback = (pet) => {
      pets.value = pets.value.filter((item) => item.name !== pet.name);
    };

    /**
     * 投喂操作
     * @param pet 宠物信息
     */
    const handleFeed = (pet) => {
      if (pet.feed < 3) {
        pet.feed++;
      } else {
        showAlert("该宠物今日已投喂三次");
      }
    };

    /**
     * 提示弹窗
     * @param msg 提示信息
     */
    const showAlert = (msg) => {
      message.value = msg;
      showAlertPop.value = true;
      setTimeout(() => {
        showAlertPop.value = false;
      }, 2000);
    };

    return {
      form,
      pets,
      showAddPop,
      clickAdd,
      clickEdit,
      addType,
      handleSave,
      all,
      allCheck,
      handleCheckedGetback,
      handleGetback,
      handleFeed,
      showAlertPop,
      message,
    };
  },
};

// 启动应用
const app = createApp(App);
app.component("add-pop", AddPop);
app.component("pop-up", PopUp);
app.mount("#app");
